<template>
  <div>
    <h2>输入关系模式</h2>
    <!-- 属性集 -->
    <div>
      <h3>属性集</h3>
      <ul>
        <li v-for="(attr, index) in attributes" :key="index">
          {{ attr }}
          <button @click="removeAttribute(index)">删除</button>
        </li>
      </ul>
      <input v-model="newAttribute" placeholder="输入新属性">
      <button @click="addAttribute">添加属性</button>
    </div>

    <!-- 函数依赖集 -->
    <div>
      <h3>函数依赖集</h3>
      <ul>
        <li v-for="(fd, index) in functionDependencies" :key="index">
          {{ fd.left }} -> {{ fd.right }}
          <button @click="removeDependency(index)">删除</button>
        </li>
      </ul>
      <div>
        <input v-model="newFDLeft" placeholder="输入左部（逗号分隔）">
        <input v-model="newFDRight" placeholder="输入右部">
        <button @click="addDependency">添加依赖</button>
      </div>
    </div>

    <!-- 显示结果 -->
    <div>
      <h3>当前模式</h3>
      <p>属性集: {{ attributes }}</p>
      <p>函数依赖集: 
        <span v-for="(fd, index) in functionDependencies" :key="index">
          {{ fd.left }} -> {{ fd.right }}<br v-if="index < functionDependencies.length - 1">
        </span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newAttribute: '',
      attributes: [],

      newFDLeft: '',
      newFDRight: '',
      functionDependencies: []
    };
  },
  methods: {
    addAttribute() {
      if (this.newAttribute.trim()) {
        this.attributes.push(this.newAttribute.trim());
        this.newAttribute = '';
      }
    },
    removeAttribute(index) {
      this.attributes.splice(index, 1);
    },
    addDependency() {
      if (this.newFDLeft.trim() && this.newFDRight.trim()) {
        this.functionDependencies.push({
          left: this.newFDLeft.trim(),
          right: this.newFDRight.trim()
        });
        this.newFDLeft = '';
        this.newFDRight = '';
      }
    },
    removeDependency(index) {
      this.functionDependencies.splice(index, 1);
    }
  }
};
</script>

<style scoped>
/* 添加一些基础样式 */
input {
  margin-right: 10px;
}
button {
  margin-left: 5px;
}
</style>